<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>个人中心</title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.css" rel="stylesheet" />
		<link href="../css/my.css" rel="stylesheet" />
		<link href="../css/modern-unified.css" rel="stylesheet" />
	</head>

	<body>
		<div class="modern-container">
			<!-- 现代化头部 -->
			<div class="modern-header">
				<div style="display: flex; align-items: center;">
					<img src="../image/logo.png" alt="" style="width: 24px; height: 24px; margin-right: 12px;">
					<h1>个人中心</h1>
				</div>
				<button class="modern-back-btn" id="setting">
					⚙️
				</button>
			</div>

			<!-- 用户信息卡片 -->
			<div class="modern-card" style="background: linear-gradient(135deg, #2ECC71 0%, #27AE60 100%); color: white;">
				<div style="display: flex; align-items: center; gap: 20px;">
					<img src="../image/logo.png" alt="" style="width: 80px; height: 80px; border-radius: 50%; border: 3px solid rgba(255,255,255,0.3);">
					<div style="flex: 1;">
						<div style="display: flex; align-items: center; gap: 12px; margin-bottom: 8px;">
							<div style="font-size: 20px; font-weight: 600;">用户</div>
							<span class="modern-status" style="background: rgba(255,255,255,0.2); color: white; font-size: 12px;">本人</span>
							<span class="modern-status" style="background: rgba(255,255,255,0.2); color: white; font-size: 12px;">已签约</span>
						</div>
						<div style="font-size: 14px; opacity: 0.9;">男 25岁</div>
					</div>
				</div>
			</div>

			<!-- 功能菜单 -->
			<div class="modern-list">
				<div class="modern-list-item" id="goRecode">
					<div class="modern-icon">
						<img src="../image/history.png" alt="预约记录" style="width: 24px; height: 24px;">
					</div>
					<div class="modern-list-content">
						<div class="modern-list-title">预约记录</div>
						<div class="modern-list-subtitle">查看历史预约信息</div>
					</div>
					<div style="color: #95A5A6;">→</div>
				</div>
				
				<div class="modern-list-item" id="goManager">
					<div class="modern-icon">
						<img src="../image/person.png" alt="家庭成员管理" style="width: 24px; height: 24px;">
					</div>
					<div class="modern-list-content">
						<div class="modern-list-title">家庭成员管理</div>
						<div class="modern-list-subtitle">管理家庭成员信息</div>
					</div>
					<div style="color: #95A5A6;">→</div>
				</div>
				
				<div class="modern-list-item" id="goDocument">
					<div class="modern-icon">
						<img src="../image/document.png" alt="我的健康档案" style="width: 24px; height: 24px;">
					</div>
					<div class="modern-list-content">
						<div class="modern-list-title">我的健康档案</div>
						<div class="modern-list-subtitle">查看个人健康记录</div>
					</div>
					<div style="color: #95A5A6;">→</div>
				</div>
			</div>
		</div>

		<script src="../js/mui.js"></script>
		<script type="text/javascript">
			mui.init()

			mui.plusReady(function() {
				getInfo()
			})
			window.addEventListener('updateData', function(event) {
				getInfo()
			});

			function getInfo() {
				// /getInfo
				let ip = localStorage.getItem("ip")
				mui.ajax(ip + '/getInfo', {
					dataType: 'json', //服务器返回json格式数据
					type: 'get', //HTTP请求类型
					timeout: 10000, //超时时间设置为10秒；
					headers: {
						'authorization': localStorage.getItem("token")
					},
					success: function(data) { 
						// ${userObj.photoUrl?ip+userObj.photoUrl:"../image/logo.png"}"
						if (data.code == 200) {
							let userObj = data.acwUser
							document.querySelector(".modern-card").innerHTML = `
								<div style="display: flex; align-items: center; gap: 20px;">
									<img src="${userObj.photoUrl?ip+userObj.photoUrl:"../image/logo.png"}" alt="" style="width: 80px; height: 80px; border-radius: 50%; border: 3px solid rgba(255,255,255,0.3);">
									<div style="flex: 1;">
										<div style="display: flex; align-items: center; gap: 12px; margin-bottom: 8px;">
											<div style="font-size: 20px; font-weight: 600;">${userObj.realName || "用户"}</div>
											<span class="modern-status" style="background: rgba(255,255,255,0.2); color: white; font-size: 12px;">本人</span>
											<span class="modern-status" style="background: rgba(255,255,255,0.2); color: white; font-size: 12px;">已签约</span>
										</div>
										<div style="font-size: 14px; opacity: 0.9;">${userObj.sex==1?"男":"女"} ${userObj.age +"岁"}</div>
									</div>
								</div>
							`
						} else {
							mui.toast("登陆状态过期,请重新登陆")
							var curr = plus.webview.currentWebview();
							var wvs = plus.webview.all();
							for (var i = 0, len = wvs.length; i < len; i++) {
								//关闭除setting页面外的其他页面
								if (wvs[i].getURL() == curr.getURL())
									continue;
								plus.webview.close(wvs[i]);
							}
							//打开login页面后再关闭setting页面
							plus.webview.currentWebview().hide()
							plus.webview.open('login.html');
							localStorage.setItem("isLogin", false);
							localStorage.setItem("token", "");
							localStorage.setItem("userId", "");
						}
					},
					error: function(xhr, type, errorThrown) {
						mui.toast("接口调用失败,请检查ip")
						console.log(errorThrown);
						console.log(JSON.stringify(xhr));
						console.log(type);
					}
				});
			}

			mui("body").on("tap", "#setting", function(event) {
				// mui.openWindow({
				// 	url: 'setting.html',
				// 	id: 'setting.html',
				// 	createNew: false,
				// 	show: {
				// 		autoShow: true,
				// 	}
				// });
				plus.webview.show(subid, "fade-in", 100);
			})
			mui("body").on("tap", "#goDocument", function(event) {
				mui.openWindow({
					url: 'myDocument.html',
					id: 'myDocument.html',
					createNew: false,
					show: {
						autoShow: true,
					}
				});
			})

			mui("body").on("tap", "#goRecode", function(event) {
				mui.openWindow({
					url: 'appointment.html',
					id: 'appointment.html',
					createNew: false,
					show: {
						autoShow: true,
					}
				});
			})

			mui("body").on("tap", "#goManager", function(event) {
				mui.openWindow({
					url: 'fManager.html',
					id: 'fManager.html',
					createNew: false,
					show: {
						autoShow: true,
					}
				});
			})
		</script>
	</body>

</html>